<template>
  <view>
    <view class="banner">
      <image src="/static/image/img22.png"></image>
    </view>
    <view class="second-panel">
      <view class="second-sub-panel">
        <view class="item">
          <view class="img-box">
            <image src="/static/image/img23.png" class="icon1"></image>
          </view>
          <view class="item-txt">新手教程</view>
        </view>
        <view class="item">
          <view class="img-box">
            <image src="/static/image/img24.png" class="icon1"></image>
          </view>
          <view class="item-txt">新人入门</view>
        </view>
        <view class="item">
          <view class="img-box">
            <image src="/static/image/img25.png" class="icon1"></image>
          </view>
          <view class="item-txt">新人进阶</view>
        </view>
        <view class="item">
          <view class="img-box">
            <image src="/static/image/img26.png" class="icon1"></image>
          </view>
          <view class="item-txt">明星达人</view>
        </view>
        <view class="item">
          <view class="img-box">
            <image
              src="/static/image/img27.png"
              class="icon1"
              @click="handleClickbtn"
            ></image>
          </view>
          <view class="item-txt">地推物料</view>
        </view>
      </view>
    </view>

    <view class="video-panel">
      <view class="panel-top">
        <view class="title">新手教程</view>
        <view class="video-icon">
          <image src="/static/image/arrow_bg.png" class="arrow-img"></image>
        </view>
      </view>
			<view class="scroll-content">
				<view class="scroll-item">
					<view>
						<image src="/static/image/img28.png" class="scroll-img"></image>
					</view>
					<view class="scroll-txt">如何注册成为推客如何注册成为推客</view>
				</view>
				<view class="scroll-item">
					<view>
						<image src="/static/image/img28.png" class="scroll-img"></image>
					</view>
					<view class="scroll-txt">如何注册成为推客如何注册成为推客</view>
				</view>
				<view class="scroll-item">
					<view>
						<image src="/static/image/img28.png" class="scroll-img"></image>
					</view>
					<view class="scroll-txt">如何注册成为推客如何注册成为推客</view>
				</view>
				<view class="scroll-item">
					<view>
						<image src="/static/image/img28.png" class="scroll-img"></image>
					</view>
					<view class="scroll-txt">如何注册成为推客如何注册成为推客</view>
				</view>
			</view>
    </view>
  </view>
</template>
<script>
</script>
<style scope>
.banner {
  margin: 20rpx;
}
.banner image {
  width: 714rpx;
  height: 260rpx;
}
.second-panel {
  margin: 20rpx;
}
.second-sub-panel {
  width: 100%;
  height: 180rpx;
  background: #fff;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
}
.item {
  flex: 1;
  text-align: center;
}
.icon1 {
  width: 66rpx;
  height: 64rpx;
}
.item-txt {
  margin-top: 12rpx;
  font-size: 24rpx;
  color: #333;
}
.video-icon {
  width: 62rpx;
  height: 50rpx;
  line-height: 46rpx;
  text-align: center;
  background: #e4e2e2;
  border-radius: 40rpx;
  justify-content: space-around;
  position: relative;
	margin-top: 20rpx;
}
.video-panel {
	margin: 20rpx;
	height: 410rpx;
	background: #fff;
	border-radius: 20rpx;
}
.panel-top {
	display: flex;
	margin: 0 20rpx;
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	justify-content: space-between;
}
.title {
	font-size: 36rpx;
	color: #333;
}
.arrow-img {
	width: 26rpx;
	height: 24rpx;
}
.scroll-item {
	margin: 20rpx;
}
.scroll-img {
	width: 300rpx;
	height: 200rpx;
	border-radius: 20rpx;
}
.scroll-txt {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
	width: 300rpx;
	margin-top: 20rpx;
}
.scroll-content {
  display: flex; /* 如果是水平滚动，可以使用flex布局 */
  overflow-x: auto; /* 允许水平滚动 */
  white-space: nowrap; /* 防止子元素换行 */
}
</style>